<template>
  <div>
    <el-form>
      <el-form-item label="查询类型：">
        <el-radio-group
          v-model="tableType"
          @change="checkType"
        >
          <el-radio-button label="QUERY" />
          <el-radio-button label="DDL" />
          <el-radio-button label="DML" />
          <el-radio-button label="N/A" />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <crudOperation
      show=""
      :permission="permission"
    />
    <el-table
      ref="table"
      :data="crud.data"
    >
      <el-table-column
        type="index"
        label="序号"
        width="55"
      />
      <el-table-column
        label="模型名称"
        prop="modelName"
      />
      <el-table-column
        label="内存不足"
        prop="param.memory"
      />
      <el-table-column
        label="缺少统计数据"
        prop="param.statisticalData"
      />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.param.isErrorModel == 'EXCEPTION'">失败</span>
          <span v-if="scope.row.param.isErrorModel == 'FINISHED'">成功</span>
          <span v-if="scope.row.param.isErrorModel == 'PENDING'">等待中</span>
        </template>
      </el-table-column>
      <el-table-column label="持续时间">
        <template slot-scope="scope">
          <span v-if="scope.row.param.continueSymbol == '>' && scope.row.param.continue != ''">大于{{
            scope.row.param.continue + scope.row.param.continueUnit }}</span>
          <span v-if="scope.row.param.continueSymbol == '<' && scope.row.param.continue != ''">小于{{
            scope.row.param.continue + scope.row.param.continueUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY' || tableType == 'DML'"
        label="线程:cpu时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.threadSymbol == '>' && scope.row.param.thread != ''">大于{{
            scope.row.param.thread + scope.row.param.threadUnit }}</span>
          <span v-if="scope.row.param.threadSymbol == '<' && scope.row.param.thread != ''">小于{{
            scope.row.param.thread + scope.row.param.threadUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY'"
        label="读取的 HDFS 字节"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.byteSymbol == '>' && scope.row.param.byte != ''">大于{{
            scope.row.param.byte + scope.row.param.byteUnit }}</span>
          <span v-if="scope.row.param.byteSymbol == '<' && scope.row.param.byte != ''">小于{{
            scope.row.param.byte + scope.row.param.byteUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY' || tableType == 'DDL'"
        label="客户端获取等待时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.waitSymbol == '>' && scope.row.param.wait != ''">大于{{
            scope.row.param.wait + scope.row.param.waitUnit }}</span>
          <span v-if="scope.row.param.waitSymbol == '<' && scope.row.param.wait != ''">小于{{
            scope.row.param.wait + scope.row.param.waitUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY' || tableType == 'DML'"
        label="生成的行"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.rowsSymbol == '>' && scope.row.param.rows != ''">大于{{ scope.row.param.rows }}</span>
          <span v-if="scope.row.param.rowsSymbol == '<' && scope.row.param.rows != ''">小于{{ scope.row.param.rows }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'DDL' || tableType == 'DML'"
        label="规划等待时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.waitTimeSymbol == '>' && scope.row.param.waitTime != ''">大于{{
            scope.row.param.waitTime + scope.row.param.waitTimeUnit }}</span>
          <span v-if="scope.row.param.waitTimeSymbol == '<' && scope.row.param.waitTime != ''">小于{{
            scope.row.param.waitTime + scope.row.param.waitTimeUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY'"
        label="规划等待时间百分比"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.percentageSymbol == '>' && scope.row.param.percentage != ''">大于{{
            scope.row.param.percentage }}</span>
          <span v-if="scope.row.param.percentageSymbol == '<' && scope.row.param.percentage != ''">小于{{
            scope.row.param.percentage }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableType == 'QUERY'"
        label="累计内存使用峰值"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.param.peakValueSymbol == '>' && scope.row.param.peakValue != ''">大于{{
            scope.row.param.peakValue + scope.row.param.peakValueUnit }}</span>
          <span v-if="scope.row.param.peakValueSymbol == '<' && scope.row.param.peakValue != ''">小于{{
            scope.row.param.peakValue + scope.row.param.peakValueUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editSet(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="del(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <pagination />
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="crud.status.cu > 0"
      title="新增"
      width="1000px"
    >
      <el-form
        ref="form"
        :inline="true"
        label-width="160px"
        :rules="rules"
        :model="ruleForm"
      >
        <el-form-item label="模型名称:">
          <el-input
            v-model="modelName"
            placeholder="请输入"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item label="查询类型：">
          <el-radio-group
            v-model="componentType"
            @change="modelChange"
          >
            <el-radio-button label="QUERY" />
            <el-radio-button label="DDL" />
            <el-radio-button label="DML" />
            <el-radio-button label="N/A" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内存是否不足:">
          <el-radio-group v-model="ruleForm.memory">
            <el-radio-button label="true" />
            <el-radio-button label="false" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否缺少统计数据:">
          <el-radio-group v-model="ruleForm.statisticalData">
            <el-radio-button label="true" />
            <el-radio-button label="false" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="状态:"
          prop="isErrorModel"
        >
          <el-radio-group v-model="ruleForm.isErrorModel">
            <el-radio-button label="EXCEPTION">失败</el-radio-button>
            <el-radio-button label="FINISHED">成功</el-radio-button>
            <el-radio-button label="PENDING">等待中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="持续时间：">
          <el-radio-group v-model="ruleForm.continueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.continue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.continueUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DML'"
          label="线程：CPU 时间"
        >
          <el-radio-group v-model="ruleForm.threadSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.thread"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.threadUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="读取的 HDFS 字节"
        >
          <el-radio-group v-model="ruleForm.byteSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.byte"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.byteUnit">
            <el-radio-button
              v-for="val in unit"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DDL'"
          label="客户端获取等待时间"
        >
          <el-radio-group v-model="ruleForm.waitSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.wait"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.waitUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DML'"
          label="生成的行"
        >
          <el-radio-group v-model="ruleForm.rowsSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.rows"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item
          v-if="componentType == 'DDL' || componentType == 'DML'"
          label="规划等待时间"
        >
          <el-radio-group v-model="ruleForm.waitTimeSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.waitTime"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.waitTimeUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="规划等待时间百分比"
        >
          <el-radio-group v-model="ruleForm.percentageSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.percentage"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="累计内存使用峰值"
        >
          <el-radio-group v-model="ruleForm.peakValueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.peakValue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.peakValueUnit">
            <el-radio-button
              v-for="val in unit"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleClose"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="editClose"
      :visible.sync="editFlag"
      title="编辑"
      width="1000px"
    >
      <el-form
        ref="forms"
        :inline="true"
        label-width="140px"
        :rules="rules"
        :model="editForm"
      >
        <el-form-item label="模型名称:">
          <el-input
            v-model="modelName"
            placeholder="请输入"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item label="查询类型：">
          <el-radio-group v-model="componentType">
            <el-radio-button label="QUERY" />
            <el-radio-button label="DDL" />
            <el-radio-button label="DML" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内存是否不足:">
          <el-radio-group v-model="editForm.memory">
            <el-radio-button label="true" />
            <el-radio-button label="false" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否缺少统计数据:">
          <el-radio-group v-model="editForm.statisticalData">
            <el-radio-button label="true" />
            <el-radio-button label="false" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="状态:"
          prop="isErrorModel"
        >
          <el-radio-group v-model="editForm.isErrorModel">
            <el-radio-button label="EXCEPTION">失败</el-radio-button>
            <el-radio-button label="FINISHED">成功</el-radio-button>
            <el-radio-button label="PENDING">等待中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="持续时间：">
          <el-radio-group v-model="editForm.continueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.continue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.continueUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DML'"
          label="线程：CPU 时间"
        >
          <el-radio-group v-model="editForm.threadSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.thread"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.threadUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="读取的 HDFS 字节"
        >
          <el-radio-group v-model="editForm.byteSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.byte"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.byteUnit">
            <el-radio-button
              v-for="val in unit"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DDL'"
          label="客户端获取等待时间"
        >
          <el-radio-group v-model="editForm.waitSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.wait"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.waitUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY' || componentType == 'DML'"
          label="生成的行"
        >
          <el-radio-group v-model="editForm.rowsSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.rows"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item
          v-if="componentType == 'DDL' || componentType == 'DML'"
          label="规划等待时间"
        >
          <el-radio-group v-model="editForm.waitTimeSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.waitTime"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.waitTimeUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="规划等待时间百分比"
        >
          <el-radio-group v-model="editForm.percentageSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.percentage"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item
          v-if="componentType == 'QUERY'"
          label="累计内存使用峰值"
        >
          <el-radio-group v-model="editForm.peakValueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.peakValue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.peakValueUnit">
            <el-radio-button
              v-for="val in unit"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="editClose"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="edit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import audit from '@/api/phaseTwo/audit.js'
import pagination from '@crud/Pagination'
const defaultCrud = CRUD({
  title: 'impala配置',
  url: '/api/cmStatementAudit/findConfigModel',
  query: {
    componentType: 'QUERY'
  }
})
export default {
  components: { crudOperation, rrOperation, udOperation, pagination },
  mixins: [presenter(defaultCrud), header(), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'add'],
        edit: ['edit'],
        del: ['del']
      },
      ruleForm: {
        memory: '',
        statisticalData: '',
        continueSymbol: '>',
        continue: '',
        isErrorModel: '',
        continueUnit: 'ms',
        threadSymbol: '>',
        thread: '',
        threadUnit: 'ms',
        byteSymbol: '>',
        byte: '',
        byteUnit: 'KiB',
        waitSymbol: '>',
        wait: '',
        waitUnit: 'ms',
        rowsSymbol: '>',
        rows: '',
        percentageSymbol: '>',
        percentage: '',
        peakValueSymbol: '>',
        peakValue: '',
        peakValueUnit: 'KiB',
        waitTimeSymbol: '>',
        waitTime: '',
        waitTimeUnit: 'ms'
      },
      modelName: '',
      componentType: 'QUERY',
      unitList: ['ms', 's', 'min', 'h'],
      unit: ['KiB', 'MiB', 'GiB'],
      symbol: [{ label: '大于', value: '>' }, { label: '小于', value: '<' }],
      editFlag: false,
      editForm: {},
      dataID: '',
      tableType: 'QUERY',
      rules: {
        isErrorModel: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },
  watch: {

  },
  created() {
    // this.query.componentType = this.tableType
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterRefresh](crud) {
      crud.data.forEach(item => {
        item.param = JSON.parse(item.param)
      })
      this.modelName = '模型' + this.componentType + (crud.data.length + 1)
    },
    handleClose() {
      this.modelName = '模型' + this.componentType + (this.crud.data.length + 1)
      this.$refs.form.resetFields()
      this.ruleForm = {
        memory: '',
        statisticalData: '',
        continueSymbol: '>',
        continue: '',
        continueUnit: 'ms',
        threadSymbol: '>',
        thread: '',
        threadUnit: 'ms',
        byteSymbol: '>',
        byte: '',
        byteUnit: 'KiB',
        waitSymbol: '>',
        wait: '',
        waitUnit: 'ms',
        rowsSymbol: '>',
        rows: '',
        percentageSymbol: '>',
        percentage: '',
        peakValueSymbol: '>',
        peakValue: '',
        peakValueUnit: 'KiB',
        waitTimeSymbol: '>',
        waitTime: '',
        waitTimeUnit: 'ms',
        isErrorModel: ''
      }
      this.crud.cancelCU()
    },
    save() {
      if (this.modelName == '') {
        this.$notify({
          title: '警告',
          message: '模型名称不能为空',
          type: 'warning'
        })
      } else {
        this.$refs['form'].validate(valid => {
          if (valid) {
            const obj = { component: 'IMPALA', isErrorModel: this.ruleForm.isErrorModel, componentType: this.componentType, modelName: this.modelName, param: JSON.stringify(this.ruleForm) }
            audit.insertModel(obj).then((res) => {
              this.crud.refresh()
              this.handleClose()
            })
          }
        })
      }
    },
    editClose() {
      this.$refs.forms.resetFields()
      this.editFlag = false
      this.editForm = {}
      this.modelName = ''
      this.dataID = ''
    },
    editSet(row) {
      this.editForm = row.param
      this.modelName = row.modelName
      this.componentType = row.componentType
      this.dataID = row.id
      this.editFlag = true
    },
    edit() {
      this.$refs['forms'].validate(valid => {
        if (valid) {
          const obj = { component: 'IMPALA', componentType: this.componentType, modelName: this.modelName, isErrorModel: this.editForm.isErrorModel, param: JSON.stringify(this.editForm), id: this.dataID }
          audit.editConfig(obj).then((res) => {
            this.editClose()
            this.crud.refresh()
          })
        }
      })
    },
    checkType() {
      this.query.componentType = this.tableType
      this.crud.refresh()
    },
    modelChange() {
      this.modelName = '模型' + this.componentType + (this.crud.data.length + 1)
      if (this.componentType == 'N/A') {
        this.ruleForm.isErrorModel = 'EXCEPTION'
      } else {
        this.ruleForm.isErrorModel = ''
      }
    },
    del(row) {
      this.$confirm('此操作将永久删除该模型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const formData = new FormData()
          formData.append('id', row.id)
          audit.delModel(formData).then((res) => {
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'
            })
            this.crud.refresh()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
